<style lang="scss" scoped>
	.pservice {
		height: 100%;
		@include n-col1;
		align-items: stretch;
		
		.pservice-list{
			display: grid;
			grid-auto-rows: max-content;
      grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
			//grid-template-columns: repeat(auto-fill, minmax(220px,1fr) );
			gap:20px;
			justify-content: center;
			>li{
				min-width: 0;
				min-height: 0;
				padding: 12px 12px 20px 12px;
				border-radius: 30px;
				background: $theme-bg-white1;
				position: relative;
				.el-icon-close{
					position: absolute;
					right: -5px;
					top: -5px;
					width: 20px;
					height: 20px;
					background: $theme-red;
					color: #fff;
					border-radius: 50%;
					@include n-row2;
				}
				>img{
					border-radius: 20px;
					object-fit: cover;
					height: 160px; 
					width: 100%;
					background:  $theme-bg-white4;
				}
				>h3{
					margin-top: 10px;
					line-height: 1.6;
					min-height: 40px;
					font-weight: bold;
					font-size: 19px;
					color: $theme-text3;
				}
				>footer{
					@include n-row1;
					margin-top: 10px;
					gap:10px;
					>i{
						color: $theme-color;
						width: 36px;
						@include n-row2;
						height: 36px;
						font-size: 20px;
					}
				}
			}
			.pservice-list-price{
				flex: 1;
				width: 0;
				>h3{
					line-height: 1;
					font-weight: bold;
					color: $theme-text5;
					@include n-row1;
					gap:10px;
					font-size: 19px;
					>span{
						line-height: 1;
						gap:3px;
						@include n-row1;
						align-items: flex-end;
						>em{
							line-height: 1;
							color: $theme-red;
						}
						>i{
							line-height: 1;
							font-size: 14px;
						}
						&+span{
							text-decoration: line-through;
						}
					}
				}
				>p{
					font-size: 14px;
					line-height: 1;
					margin-top: 10px;
					color: $theme-text5;
				}
			}
		}
		
		.pservice-detail{
			background: $theme-bg-white4;
			padding: 20px;
			>img{
				width: 100%;
				border-radius: 10px;
			}
			>article{
				margin-top: 20px;
				border-radius: 10px;
				background: $theme-bg-white1;
				padding: 20px;
				>h3{
					@include n-row5;
					gap:10px;
					font-size: 16px;
					font-weight: bold;
					color: $theme-text2;
					>span{
						font-weight: 400;
						border-radius: 10px;
						height: 20px;
						background: var(--theme-grey-light9);
						font-size: 12px;
						color: $theme-text5;
						@include n-row2;
						gap:5px;
						padding: 0 5px;
					}
				}
				>p{
					@include n-row1;
					font-size: 20px;
					align-items: flex-end;
					color: $theme-red;
					margin-top: 20px;
					font-weight: bold;
					>i{
						font-size: 15px;
						transform: translate(0,-20%);
						line-height: 1;
					}
				}
			}
			>section{
				margin-top: 20px;
				border-radius: 10px;
				background: $theme-bg-white1;
				padding: 20px;
				font-size: 14px;
				line-height: 1.6;
				color: $theme-text3;
			}
		}

	}
</style>

<template>

	<div class="n-page pservice" v-loading="loading">
		<h1 class="n-page-h1"><em>{{ $route.meta.title }}</em></h1>
		<ul class="pservice-list">
			 
			<li v-for="item,idx in list" :key="idx">
				<i class="el-icon-close" v-if="($store.userInfo || {}).type === 1"  @click="del(item)"></i>
        <img @click="detail(item)" :src="$conf.env.baseUrl + item.litpic_local" />
				<h3 @click="detail(item)" v-html="item.title"></h3>
				<footer>
					<aside class="pservice-list-price">
						<h3><span><em>￥{{item.membership_price}}</em><i></i></span>
<!--              <span>￥163.33<i></i></span>-->
            </h3>
						<p>代理价：</p>
            <p>￥{{item.agent_price}}</p>
					</aside>
					<el-button type="primary" @click="add(item)">购买</el-button>
<!--					<i class="el-icon-phone-outline"></i>-->
				</footer>
			</li>
			 
		</ul>
		<n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList" :btns="handleConf.btns"  @ok="handle"  :form="handleConf.form" />
		<n-handle class="n-page-dialog pservice-detailWrap" :conf="detailConf.props" ref="detail" :compList="detailConf.compList" >
			<template #detail>
				<div class="pservice-detail">
					<img :src="$conf.env.baseUrl + detailConf.form.litpic_local" />
					
					<article>
						<h3 v-html="detailConf.form.title"><span class="el-icon-view">{{detailConf.form.view_num }}</span></h3>
						<p><i>￥</i>{{detailConf.form.membership_price}}</p>
					</article>
					
					<section v-html="detailConf.form.details"></section>
					
					
				</div>
			</template>
		</n-handle>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
			  // list:{},
				loading:false,
				list:[],
				detailConf:{
					form:{},
					props:{title: '详情', insertEl:false, type:'dialog', size:'600px'},
					compList:[{type:"slot", slotName:'detail'}],
				},
				
				
				handleConf:{
					props:{title: '创建订单', type:'dialog', size:'600px'},
					form:{},
					_form:{
						user_name:'',
						tel:'',
						uid:'',
						id:'',
					},
					compList:[
						{type: 'text', label: '姓名', required:true, k: 'user_name'},
						{
							type: 'text', label: '手机号', required:true, k: 'tel',
							verif:({item,v})=> !(item.err = (!v || !(v + '').match(/^1\d{10}/)) ? '手机号有误' : '')
						},
					],
					btns:[
						{ label: '确定', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
			}
		},
	  mounted() {
			this.getData();
		},
		methods: {
			detail(row){
				this.detailConf.props.show = true;
				this.detailConf.form = row;
				
			},
			async getData(){
				const res = await this._req(this.$api.goods.getService(this.params));
				if(!res) return;
				this.list = res.results;
			},
			async del({id}){

        this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () =>  {
          const res = await this._req(this.$api.goods.delService({id}));
				  if(!res) return;
				  this.$msg();
				  this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


			},
			
			add(row){
			  // this.$alert('客服电话：18661850495', '联系客服', {
        //   confirmButtonText: '确定',
			  // })
				const {handleConf} = this;
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				handleConf.form = {...this.$base.clone(handleConf._form), id:row.id, user_id: this.$store.userInfo.user_id };
				handleConf.props.show = true;
			},
			async handle(opt){
				const { handleConf:{props,form } } = this;
				if(!this.$refs.handle.verif()) return;
				const res = await this._req(this.$api.company.createService(form),props);
				if(!res)return;
				this.$msg();
				props.show = false;
			},
			
			
		}
	}
</script>
